<!-- 头像组件 -->
<template>
	<view class="account-info vip">
		<!-- 用户头像 -->
		<view class="account-head">
			<!-- 头像图片容器 -->
			<view class="account-head-img">
				<image :src="userVo.picUrl" mode="widthFix"></image>
		<!-- 		<image src="../../static/temp-photo.jpg" mode="widthFix"></image> -->
			</view>
			<image v-if="userVo.judgeStatus === 0 || userVo.manager" :src="userVo.picGif" class="imgIcon account-hat"></image>
			<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
		 <!--  <icon v-if="" type="" class="account-hat hat-appreciation"></icon> -->
		 	 <!--  <icon v-if="" type="" class="account-hat hat-appreciation"></icon> -->

		<!-- 		<icon :src="userVo.picGif"></icon> -->
		</view>
		<!-- 文字和图标信息 -->
		<view class="account-info-content">
			<!-- 基础信息 -->
			<view class="base-info">
				<text class="account-nickName">{{userVo?.nickName}}</text>
					<!-- <text class="account-nickName">甲乙丙人</text> -->
				<view class="account-level"><text>{{userVo?.userLevel}}</text></view>
				<!-- 男性 -->
				<icon type="" class="imgIcon icon-male"></icon>
			</view>
			<!-- 附加信息 -->
			<view class="plus-info">
				<!-- VIP铭牌 -->
				<!-- v-if="(!!userVo.vColor && (userVo.vColor.replace('[','').replace(']','').split(',')).includes('3'))" -->
				<text v-if="(isVip)" class="account-nameplate vip-nameplate">{{userVo.vipLevel}}</text>
				<!-- SVIP铭牌 -->
				<text v-if="(isSvip)" class="account-nameplate svip-nameplate">{{userVo.vipLevel}}</text>
				<!-- 店铺 -->
				<icon v-if="(isStore)" type="" class="imgIcon icon-store"></icon>
				<!-- 品牌 -->
				<icon  v-if="(isStart)" type=""  class="imgIcon icon-brand"></icon>
				<!-- 认证 -->
				<icon v-show="userVo?.hasTobaccBusinessLicense" type="" class="imgIcon icon-tobacco"></icon>
				<!-- 品鉴-->
				<icon v-if="(isBrand)" type="" class="imgIcon icon-evaluation"></icon>
			</view>
			<view class="time-info">
					<text>{{getTime(msgVo.createDate)}}</text>
				</view>
			<!-- 账号 -->
			<!-- <text class="account-id">账号:{{userVo.account}}</text> -->
		</view>
	</view>
</template>

<script setup lang="ts">
import type { IMsg,IUserVo } from '@/logic/globInterface/dataInterface';;
import {reactive, onMounted, watch,ref} from 'vue'
	//定义组件引用数据 父组件绑定此属性
	interface Props{
		userVo:IUserVo,
		vcolor:string;
		msgVo:IMsg
	}
	const props = defineProps<Props>();
	const userVo = reactive(props.userVo);
	console.log('userVo',userVo)
	const msgVo=reactive(props.msgVo)
	const isVip= ref<boolean>(false);
	const isSvip=ref<boolean>(false);
	const isStore=ref<boolean>(false);
	const isStart=ref<boolean>(false);
	const isBrand=ref<boolean>(false)
	let createDate=ref(Number)
	// console.log('oo', userVo.vColor)
	// console.log("name=>" + userVo.nickName);
	// console.log("picUrl=>" + userVo.picUrl);
	let user=reactive({
		nickName:'哈哈哈',
		picUrl:'../../static/scssImages/c_themes/default/head-portrait.webp',
		//用户等级
		userLevel:'1',
		 //账号
		account:'555',
		//Vip等级
		vipLevel:'222',
	})
	const getTime = (time:any) => {
		const date = new Date(time)
		let Y = date.getFullYear() + '-';
		let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		let D = date.getDate() + ' ';
		let h = date.getHours() + ':';
		let m = date.getMinutes() + ':';
		let s = date.getSeconds(); 
		return Y+M+D+h+m+s
		
	}
	onMounted(()=>{
		// if(!!userVo1.vColor){
		// 	console.log('ss',(userVo1.vColor.replace('[','').replace(']','').split(',')))
		// }

	})
	watch(userVo,(oldValue,changeValue)=>{
			console.log("oldValue:" + oldValue.vColor);
			console.log("changeValue:" + changeValue.vColor);
			if(!!changeValue.vColor){
				(isVip as any).value =changeValue.vColor.includes('3') ,
				(isSvip as any).value=changeValue.vColor.includes('4'),
				(isStore as any).value=changeValue.vColor.includes('1'),
				(isStart as any).value=changeValue.vColor.includes('2'),
				(isBrand as any).value=changeValue.vColor.includes('5')
				console.log('999',isVip)
				// Util.check(Type,,is)
			  // isVip.value = changeValue.vColor.replace('[','').replace(']','').split(',').includes('3')
			}
			
			console.log('oooo',oldValue)
			console.log('tiem'+oldValue.createDate)
      console.log('time2'+changeValue.createDate)
		  // const time:any (oldValue.createDate) {
		  // 	let date:Date=new Date(oldValue.createDate);
		  // 	let y:number=date.getFullYear();
				// let MM:number=date.getMonth()+1;
				// MM=MM<10?('0'+MM) : MM
				// let d:number=date.getDate()
				// d:Number=a<10?('0'+d) :d
				// let h=date.getHours()
				//  h=h<10?('0'+h) :h
				// let m=date.getMinutes()
				// m=m<10？('0'+m) :m;
				// let s=date.getSeconds()
				// s=s<10?('0'+s) :s
				// return y+'-'+MM+'-'+d+' '+h+':'+m+':'+s;
				
		  // }
	})

	// watch(userVo,(oldValue,changeValue)=》{)
</script>

<style lang="scss">
	.iconImage {
		// width: 48rpx;
		// height: 48rpx;
		// border-radius: 100%;
	}
</style>